<template>
	<zh-layout>
		<view slot="top-nav">
			<uni-nav-bar title="绑定主体" backgroundColor="#63a4f0" color="#222C33" statusBar="true" @clickLeft="back()"
				left-icon="arrowleft">
				<view slot="title" @click="openTitle()" class="uni-navbar__header-container-inner slot">
					<text class="uni-nav-bar-text uni-ellipsis-1">{{'绑定主体'}}</text>
					<!-- <uni-icons type="bottom" color="#005337" size="20"></uni-icons> -->
				</view>
			</uni-nav-bar>
		</view>
		<view slot="contain-view" v-if="isshowconview">
			<!-- 搜索行 -->
			<view class="search-lines" v-if="isshowlineonesearch">
				<view class="search-title">
					主体列表
				</view>

			</view>
			<!-- 农事处理 -->
			<scroll-view class="select-facility-view" scroll-y="true" :style="{height: setcollapseheight() + 'px'}"
				@scrolltolower="handleScrolltolowerone()">
				<Item :dataList='cardList' @setpage1num="search()" />
				<view class="loadingimg-view" v-if="componten1mes.isshowloading">
					<image src="https://matefarm.net/download/img/lowerloading.gif" mode="aspectFit" class="loadingimg">
					</image>
				</view>
				<view class="bottom-ios-line"></view>
				<view v-if="!isshowblank" class="facility-view-nodata">
					<image class="facility-view-blankimg" mode="aspectFit" src="~@/static/blank.png"></image>
					<view class="facility-view-nodata-line">暂无数据</view>
				</view>
			</scroll-view>
		</view>
		<view slot="fix-view">
			<view class="footerbutton" @click="$refs.alertDialog.open()" v-if="StrategicStatus">
				<u-icon name="plus-circle" class="color-f" color="#ffffff"></u-icon>{{'添加绑定主体'}}
			</view>


			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="'info'" cancelText="取消" confirmText="确认" :title="'绑定主体'" :before-close="true"
					@confirm="dialogConfirm" @close="() =>{$refs.alertDialog.close()}">
					<view slot="default" class="report-progress">
						<uni-forms ref="form" :rules="rules" :model="formData">
							<uni-forms-item class="password-item" label="邀请码(必填)：" name="inviteCode">
								<uni-easyinput type="text" :input-border="false" v-model="formData.inviteCode"
									@blur="jiaodianEle($event, 'inviteCode')" placeholder="请输入邀请码" />
							</uni-forms-item>
							<uni-forms-item class="password-item is-disabled" label="主体单位名称：" name="name">
								<view type="text" class="hasvalueinput form" :class="{'uni-date-x': !formData.name}"
									placeholder-class="nohasvalueinput" auto-blur placeholder="请输入邀请码">
									{{ formData.name || '请输入邀请码' }}
								</view>
							</uni-forms-item>
						</uni-forms>
					</view>
				</uni-popup-dialog>
			</uni-popup>

			<u-toast ref="uToast"></u-toast>
		</view>
	</zh-layout>
</template>

<script>
	import Api from "@/api/socialized-servce/person-message/binding-subject.js";
	import Item from "../components/binding-subject-item.vue"
	import zhLayout from "@/components/zh-layout/zh-layout.vue"
	export default {
		components: {
			Item,
			zhLayout
		},
		data() {
			return {
				isshowblank: true,
				isshowconview: true,
				datetimePickershow: false,
				// 是否展示搜索框
				isshowlineonesearch: true,
				dataList: [{}],
				show: false,
				shows: false,
				loading: false,
				showTitle: false,
				end: new Date(),
				popupData: {
					overlay: false,
					mode: "bottom",
					closeable: true,
					closeOnClickOverlay: true,
				},
				popupDatas: {
					overlay: false,
					mode: "bottom",
					closeable: false,
					closeOnClickOverlay: false,
				},
				checked: false,
				show1: false,
				show2: false,
				show3: false,
				shows: false,
				facilityColumns: [
					[],
					[]
				],
				formData: {},
				cusmesone: {},
				cusmestwo: {
					facilityName: "请输入电子耳标",
					facilityNo: 0,
				},
				nowselectviewindex: 0,
				// 页面显示状态 0为暂无数据 1为农事处理 2为农事记录
				isshowviewstau: 0,
				// 是否展示可选择农业类型
				isshowfarmtypeview: false,
				// 解决返回是组件不刷新
				componten1key: 0,
				componten2key: 0,
				cardList: [],
				addStatus: false,
				// 上拉加载更多
				componten1mes: {
					nowpage: 1,
					total: 0,
					isshowloading: false,
				},
				StrategicStatus: true,
				partyNo: void 0,
				rules: {
					inviteCode: {
						rules: [{
							required: true,
							errorMessage: '请输入邀请码',
						}]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入邀请码',
						}]
					}
				},
			};
		},
		onLoad(e) {},
		onReady() {
			this.search();
			this.$nextTick(() => {

				this.cusmesone.dateList = ["", ""];
			});
		},
		onPullDownRefresh() {
			this.componten1mes = {
				nowpage: 1,
				total: 0,
				isshowloading: false,
			};
			this.search();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			async getStatus() {
				// 控制按钮显示隐藏
				let status = await this.$getButton('569', '439')
				if (status) {
					this.StrategicStatus = status
				} else {
					this.StrategicStatus = status
				}
				// this.getvrtualDeviceList()
			},

			async jiaodianEle(s, ele) {
				console.log(s)
				let e = s.detail.value;
				this.focus = false;
				// if (!e) return;
				if (e) {
					if (JSON.stringify(e).length > 38) {
						setTimeout(() => {
							if (!this.focusSrt) {
								this.focus = true;
							} else if (this.focusSrt) {
								this.focus = false;
								this.focusSrt = false
							}
						}, 100);
						return uni.$u.toast("输入长度超出最大限制！");
					}
				} else {
					return;
				}
				Api.queryByInviteCode({
					[ele]: e
				}).then(({
					data,
					code,
					msg
				}) => {
					console.log(data)
					if (code === 200 && data !== undefined) {
						// this.InviteCode
						this.$set(this.formData, 'name', data.name)
						this.$set(this.formData, 'partyNo', data.organizationNo)
						return uni.$u.toast("查找成功");
					} else {
						uni.$u.toast(msg || "查找失败");
					}
				});
				// console.log(e.detail.value, i);
			},
			navigateBack() {
				uni.navigateBack();
			},
			dialogConfirm() {
				this.$refs.form.validate().then(async res => {
					let params = {
						...this.formData,
						partyType: 3, // 用户子系统类型  1总部监管方 2业务运营方 3服务提供方 4终端用户方"
						userNo: uni.getStorageSync('userNo') || '',
						// active: 0,
						// defaultFlag: 0
					};
					Api.add(params).then(
						res => {
							console.log(res)
							if (res.code == 200) {
								uni.showToast({
									title: "新增成功"
								})
								this.search();
								this.$refs.alertDialog.close()
							} else {
								uni.showToast({
									title: res.msg || '新增失败',
									icon: 'none'
								});
							}
							// console.log(res)
						});
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},

			collapseOpen(e) {
				console.log(e);
			},
			close() {
				this.show = false;
				this.cusmesone = {
					dateList: ['', '']
				};
				this.search();
			},
			closes() {
				this.shows = false;
			},
			datetimeP() {
				datetimePickershow = true;
			},
			formatter(type, value) {
				if (type === "year") {
					return `${value}年`;
				}
				if (type === "month") {
					return `${value}月`;
				}
				if (type === "day") {
					return `${value}日`;
				}
				return value;
			},
			handle(e) {
				this.formData = e;
				this.shows = !this.shows;
			},
			// 搜索
			search() {
				let zhentity = {
					...this.cusmesone,
				};

				this.componten1mes = {
					nowpage: 1,
					total: 0,
					isshowloading: false,
				};
				this.getcardmessage(this.cusmesone.nowpage, zhentity);
			},
			// ---获取告警卡片信息---
			getcardmessage(nowpage = 1, zhentity = {}) {
				//   console.log(zhentity, nowpage);
				// console.log(this.checked);
				let params = {
					auditingStatus: this.checked ? 2 : void 0,
					userNo: uni.getStorageSync('userNo') || 'aa',
					partyNo: uni.getStorageSync('partyNo') || uni.getStorageSync('organizationNo') ||
						'SDSDSSDDDDSDWCDFWED',
					partyType: 3
				};
				Api.queryEntryInfo(params).then(
					({
						data: data,
						code: code,
						msg: msg
					}) => {
						if (data) {
							let nowtotal = data.totalElements;
							if (nowtotal) {
								this.componten1mes.total = nowtotal;
							}
							let list = data.map(item => {
								return {
									...item,
									...item.organization,
								}
							});;
							if (data && list && list.length > 0) {
								if (nowpage === 1) {
									this.cardList = list;
									this.setshowview(1);
								} else if (nowpage > 1) {
									this.cardList.push(...list);
								}
								this.setshowview(1);
							} else {
								this.cardList = [];
								this.setshowview(0);
							}
						} else {
							this.setshowview(0);
							this.cardList = [];
						}
					}
				);
			},
			async queuesheep(e) {
				const {
					data: data,
					code: code
				} = await bindingsApi.queryByBatchNo(e);
				if (code === 1 && data !== undefined) {
					return data;
				}
			},
			// 两个选择框的确认方法
			confirmone(res) {
				// console.log('获取了用户选择----->' + JSON.stringify(res));
				this.cusmesone = res.data[0];
				let zhbatchid = res.data[0]?.batchNo;
				this.cusmestwo = {
					facilityName: "选择设施",
					facilityNo: 0,
				};
				this.queryfacilitylist(zhbatchid);
			},
			setshowview(i) {
				setTimeout(() => {
					this.isshowblank = true;
					if (i === 0) {
						this.isshowblank = false;
					} else {
						this.isshowblank = true;
						this.isshowviewstau = i;
					}
				}, 200);
			},
			tomes(e) {
				let url =
					"/pages/socialized-service/person-message/binding-subject/binding-subject-add";
				let params = {
					...e,
					...e.sheepBO,
				};
				this.$zhtogo(url, params);
			},
			goToMes(e) {
				uni.navigateTo({
					url: "/pages/socialized-service/person-message/binding-subject/binding-subject-add",
				});
			},
			// 组件1下拉加载更多
			handleScrolltolowerone() {
				// console.log("handleScrolltolowerone");
				let len = this.componten1mes.nowpage * 3;
				if (len >= this.componten1mes.total) {
					this.setshowview(1);
					setTimeout(() => {
						this.componten1mes.isshowloading = false;
					}, 400);
					return;
				}
				this.componten1mes.nowpage += 1;
				this.componten1mes.isshowloading = true;
				this.getcardmessage(this.componten1mes.nowpage);
			},
			//  设置可选择设施高度
			setcollapseheight() {
				let winHeight = 0;
				// let newheight = this.customBar
				let newheight = uni.upx2px(220);
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.screenHeight;
					},
				});
				winHeight = parseInt(winHeight) - newheight;
				if (this.isshowviewstau === 1 || this.isshowviewstau === 2) {
					let newheighttwo = uni.upx2px(110);
					winHeight -= newheighttwo;
				}
				// #ifndef H5
				winHeight = winHeight - 10;
				// #endif
				return winHeight;
			},
			//--------顶部导航栏方法-----
			//退出系统
			loginout() {
				// #ifdef APP-PLUS
				plus.runtime.quit();
				// #endif
			},
			//返回功能
			indexout() {
				let url = "/pages/index/index";
				this.$zhtogo(url);
			},
			//返回上一步
			back() {
				let url = "/pages/socialized-service/person-message/person-message";
				uni.reLaunch({
					// animationType:'fade-in',
					url: url,
				});
				// uni.navigateBack({
				// 	delta: 1,
				// });
			},
		},
	};
</script>

<style lang="scss" scoped>
	.farmingtype-select {
		width: 100%;
		height: 70rpx;
		// background-color: #00FFEE;
		display: flex;
		align-items: center;

		.farmingtype-select-img {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.select-top-bar {
		width: 100%;
		height: 160rpx;
		justify-content: space-around;
		// margin-top: 20rpx;
		white-space: nowrap;
		// background-color: #007AFF;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;

		.select-top-bar-item {
			display: inline-block;
			margin-top: 5rpx;
			margin-right: 20rpx;
			width: 162rpx;
			height: 150rpx;

			.top-bar-image {
				width: 100rpx;
				height: 100rpx;
				margin-left: 30rpx;

				// background-color: #FFFDEF;
				.top-bar-image-sty {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.top-bar-item-title {
				width: 162rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
			}
		}

		.select-top-bar-item:last-child {
			margin-right: 0;
		}
	}

	.search-value {
		color: #000;
		border: 1rpx solid #e5e5e5;
		// height: 40rpx;
	}

	.select-facility-view {
		margin-top: 15rpx;
		position: relative;

		// height: calc(100% - 150rpx) ;
		.facility-view-nodata {
			width: 100%;
			height: 460rpx;
			padding-top: 120rpx;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;

			.facility-view-blankimg {
				width: 400rpx;
				height: 400rpx;
			}

			.facility-view-nodata-line {
				height: 50rpx;
				line-height: 50rpx;
				margin-top: 10rpx;
				color: #cecece;
			}
		}

		.facility-view-item {
			width: 95%;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			margin-left: 5%;
			// padding-right: 2.5%;
			font-size: 24rpx;
			// line-height: 20px;
			border-radius: 20rpx;
			// background-image: url(../../static/instrumented-monitoring/right.png);
			background-repeat: no-repeat;
			background-position: 92% 50%;
			background-size: 35rpx;
		}

		.loadingimg-view {
			width: 100%;
			height: 200rpx;
			background-color: #ffffff;
			margin-bottom: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.loadingimg {
				height: 200rpx;
			}
		}
	}

	.agri-process {
		width: 100%;

		.agri-process-list {
			width: 100%;

			.agri-process-item {
				width: 100%;
				// height: 300rpx;
				margin-bottom: 20rpx;
				background-color: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
				border-radius: 20rpx;
				padding: 4rpx;

				.process-item-title {
					height: 80rpx;
					font-size: 28rpx;
					line-height: 80rpx;
					font-weight: 600;
					color: #63a4f0;
				}

				.process-item-message {
					box-sizing: border-box;
					width: 100%;
					padding: 20rpx;
					background-color: rgba(245, 246, 250, 0);
					border-radius: 5px;
					font-size: 26rpx;
					line-height: 45rpx;

					>.item-message-line {
						margin-bottom: 20rpx;
						padding: 10rpx 0 10rpx;
						border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);

						&:last-child {
							border-bottom: 0rpx solid rgba(0, 0, 0, 0.05);
							margin-bottom: 0rpx;
						}
					}

					.item-message-line {
						width: 100%;
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						align-items: center;
						color: #000;

						.item-message-line-title {
							min-width: 120rpx;
							white-space: nowrap;
							// margin-right: 20rpx;
						}

						.item-message-line-value {
							white-space: nowrap;
							display: flex;
						}
					}
				}
			}
		}

		.zh-but-add-view {
			width: 700rpx;
			height: 80rpx;
			position: fixed;
			z-index: 99;
			bottom: 120rpx;
			padding-bottom: env(safe-area-inset-bottom);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.view-popup-box {
		width: 100%;
		padding: 4rpx 10rpx;
		position: relative;

		input {
			border: 1rpx solid rgba(0, 0, 0, 0.15);
			padding: 20rpx 10rpx;
		}

		::v-deep .uni-date__x-input {
			height: 40rpx;
			line-height: 40rpx;
			padding: 15rpx 10rpx;
		}
	}

	.u-popup-slot {
		width: 500rpx;
		// height: 500rpx;
		padding: 60rpx 20rpx 50rpx;
		box-sizing: border-box;
		@include flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		align-content: center;

		.button-left {
			position: absolute;
			top: 20rpx;
			left: 20rpx;
			font-size: 40rpx;
		}

		.button-center {
			position: absolute;
			top: 22rpx;
			font-size: 32rpx;
		}

		.button-right {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			font-size: 40rpx;
		}
	}

	::v-deep {
		.u-popup__content {
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
		}

		.u-cell__body {
			padding-left: 0;
			padding: 10rpx 0 10rpx;
		}

		.u-collapse-item__content__text {
			padding: 0;

			.u-collapse-content {
				padding: 20rpx 0;
				font-size: 28rpx;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);

				&:last-child {
					border-bottom: 0rpx solid rgba(0, 0, 0, 0.05);
				}
			}
		}

		.u-collapse {

			// padding: ;
			.u-collapse-item {
				margin-bottom: 20rpx;
				padding: 5rpx 10rpx;
				box-sizing: border-box;
			}

			.u-cell__body {
				border-radius: 20rpx;
				padding: 20rpx 10rpx;
				// border: 1px solid rgba(0, 0, 0, 0.3);
				box-shadow: 3rpx 6rpx 10rpx 1rpx rgba(0, 0, 0, 0.15);
			}

			.u-collapse-item__content {
				border-end-end-radius: 20rpx;
				border-end-start-radius: 20rpx;
				box-shadow: -1rpx 0 10rpx 1rpx rgba(0, 0, 0, 0.15);
				width: 90%;
				margin: 0 auto;
				box-sizing: border-box;

				// padding: 20rpx 10rpx;
				.u-collapse-item__content__text {
					padding: 40rpx;
				}

				.u-line {
					margin-bottom: 0;
				}
			}
		}
	}

	::v-deep {
		.uni-navbar--border {
			border: 0;
		}

		.u-button {
			margin: 0;
		}
	}

	.search-lines {
		color: #000;
		padding: 3rpx 34rpx;

		.search-title {
			width: 100%;
			line-height: 120rpx;
			text-align: center;
			font-size: 42rpx;
		}
	}

	.facilityColumns {
		::v-deep {
			.u-transition {
				z-index: 10080 !important;
			}
		}
	}

	.w25r {
		width: 100rpx;
	}

	.password-item {
		white-space: nowrap;
		display: flex;
		align-items: center;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 0 10rpx;
		background: #F2F5F7;

		&.is-disabled {
			background: #D7DEE4;
		}
	}

	::v-deep {
		.uni-forms-item__label {
			width: 200rpx !important;
		}

		.uni-popup {
			z-index: 10000;
		}
	}
</style>